<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Page } from '@vben/common-ui';

defineOptions({
  name: 'IntersectionObserver',
});
const boxNum = ref(10);
onMounted(() => {
  const io = new IntersectionObserver(
    (entries) => {
      // IntersectionObserverEntry 作为一个参数返回
      entries.forEach((item) => {
        if (item.isIntersecting) {
          item.target.classList.add('transition');
        } else {
          item.target.classList.remove('transition');
        }
      });
    },
    { root: null, rootMargin: '0px', threshold: [0] },
  );
  const element = document.querySelectorAll('.box');
  element.forEach((element) => {
    io.observe(element);
  });
});
</script>
<template>
  <Page auto-content-height>
    <div id="box" class="divide-x divide-y border-black">
      <div class="box" v-for="item in boxNum" :key="item"></div>
    </div>
  </Page>
</template>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 400px;
  // border: 1px solid black;
  background-color: red;
}

.transition {
  background-color: aqua;
  transition: 2s;
}
</style>
